const React = require('react');
const ReactDOM = require('react-dom');
const Component = React.Component;
const Layout = require('Layout');
const Header = Layout.Header;
const Content = Layout.Content;
const Footer = Layout.Footer;
const Sider = require("Sider");
const Tile = require("./Tile");

class Page extends Component{
    componentDidMount (){
        for(let i in this.refs){
            let ref = this.refs[i];
            let block = ReactDOM.findDOMNode(ref);
            SyntaxHighlighter.highlight({}, block);
        }
    }

    render() {
        return (
            <div className="container">
                <Layout className="demo-layout">
                    <Header>Header</Header>
                    <Content>Content</Content>
                    <Footer>Footer</Footer>
                </Layout>

                <div className="mt-30">
                    <Layout className="demo-layout">
                        <Header>Header</Header>
                        <Layout>
                            <Sider>Sider</Sider>
                            <Content>Content</Content>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>
                </div>

                <div className="mt-30">
                    <Layout className="demo-layout">
                        <Header>Header</Header>
                        <Layout>
                            <Content>Content</Content>
                            <Sider>Sider</Sider>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>
                </div>

                <div className="mt-30">
                    <Layout className="demo-layout">
                        <Sider>Sider</Sider>
                        <Layout>
                            <Header>Header</Header>
                            <Content>Content</Content>
                            <Footer>Footer</Footer>
                        </Layout>
                    </Layout>
                </div>
            </div>
        )
    }
}

module.exports = Page;